<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-green']">
		<template v-slot:gHeader>
			<view style="height: 44px" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<gui-header-leading :home="false" :backButtonClass="['gui-color-white']"></gui-header-leading>
				<text class="gui-bold gui-flex1 gui-text-center gui-ellipsis gui-color-white" style="margin-bottom: 5rpx; font-size: 16px">实验地块</text>
				<view style="width: 70rpx" @click="openpopup">
					<text class="gui-icons gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe625;</text>
				</view>
			</view>
		</template>
		<template v-slot:gFixedTop>
			<view class="gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-nowrap gui-align-items-center" style="height: 88rpx">
				<view class="graceSelectMenuItem">
					<gui-select-menu :items="dataRec.selectMenu1" @select="select1" ref="selectMenu1" :isH5header="false"></gui-select-menu>
				</view>
				<view class="graceSelectMenuItem">
					<gui-select-menu :items="dataRec.selectMenu2" @select="select2" :selectIndex="dataRec.selectIndex2" ref="selectMenu2" :isH5header="false"></gui-select-menu>
				</view>
				<view class="graceSelectMenuItem">
					<gui-select-menu :items="dataRec.selectMenu3" @select="select3" :selectIndex="dataRec.selectIndex3" ref="selectMenu3" :isH5header="false"></gui-select-menu>
				</view>
			</view>
		</template>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view class="listWrap gui-padding-x" style="margin-top: 100rpx">
				<radio-group @change="(e) => radioChange(e, 3)">
					<view
						class="gui-bg-white gui-margin-top gui-border-radius gui-flex gui-align-items-center"
						style="padding: 30rpx 20rpx"
						v-for="(item, index) in dataRec.listData"
						:key="item.id"
					>
						<view class="" style="margin-right: 10rpx">
							<radio style="transform: scale(0.7)" color="#07c160" :value="item.id.toString()" :checked="item.id == dataRec.currentSelect" />
						</view>
						<view class="">
							<view class="gui-h6 gui-blod gui-ellipsis">试验地名称：{{ item.title }}</view>
							<view class="gui-text gui-text-small gui-color-gray" style="margin-top: 20rpx">部门：{{ item.bumen_title }}</view>
							<view class="gui-text gui-text-small gui-color-gray" style="margin-top: 10rpx">开始时间：{{ item.s_time }}</view>
							<view class="gui-text gui-text-small gui-color-gray" style="margin-top: 10rpx">结束时间：{{ item.e_time }}</view>
							<view class="gui-text gui-text-small gui-color-gray" style="margin-top: 10rpx">品种产量：{{ item.qk_num }}</view>
						</view>
					</view>
				</radio-group>
			</view>

			<gui-popup ref="guipopup" :zIndex="1000" :canCloseByShade="false">
				<view class="gui-relative gui-box-shadow gui-bg-white gui-padding gui-border-radius">
					<view class="gui-text gui-text-center gui-blod gui-h4" style="margin-bottom: 20rpx">{{ dataRec.stepName }}</view>
					<view class="formWrap">
						<template v-if="dataRec.step == 1">
							<view class="gui-form-item" :class="['gui-border-b']">
								<text class="gui-form-label gui-secondary-text myTextClass">试验地名称</text>
								<view class="gui-form-body">
									<input type="text" class="gui-form-input" :class="['algin-right']" v-model="dataRec.formData.title" placeholder="请输入试验地名称" />
								</view>
							</view>
							<view class="gui-form-item" :class="['gui-border-b']">
								<text class="gui-form-label gui-secondary-text myTextClass">地块横排数量</text>
								<view class="gui-form-body">
									<input type="text" class="gui-form-input" :class="['algin-right']" v-model="dataRec.formData.heng" placeholder="请输入数量" />
								</view>
							</view>
							<view class="gui-form-item" :class="['gui-border-b']">
								<text class="gui-form-label gui-secondary-text myTextClass">地块纵排数量</text>
								<view class="gui-form-body">
									<input type="text" class="gui-form-input" :class="['algin-right']" v-model="dataRec.formData.zong" placeholder="请输入数量" />
								</view>
							</view>
						</template>
						<template v-else-if="dataRec.step == 2">
							<radio-group @change="(e) => radioChange(e, 1)" class="gui-flex gui-wrap gui-space-between">
								<label class="gui-flex gui-align-items-center" v-for="(item, index) in dataRec.arrangMode" :key="item.value">
									<view>
										<radio style="transform: scale(0.7)" color="#07c160" :value="item.value" :checked="item.value === dataRec.formData.pailie" />
									</view>
									<view class="gui-form-label gui-secondary-text">{{ item.name }}</view>
								</label>
							</radio-group>
						</template>
						<template v-else-if="dataRec.step == 3">
							<radio-group @change="(e) => radioChange(e, 2)">
								<label class="gui-flex gui-align-items-center">
									<view>
										<radio style="transform: scale(0.7)" color="#07c160" value="1" :checked="'1' == dataRec.formData.shunxu" />
									</view>
									<view class="gui-form-label gui-secondary-text">从左到右排列</view>
								</label>
								<label class="gui-flex gui-align-items-center">
									<view>
										<radio style="transform: scale(0.7)" color="#07c160" value="2" :checked="'2' == dataRec.formData.shunxu" />
									</view>
									<view class="gui-form-label gui-secondary-text">S型排列</view>
								</label>
							</radio-group>
						</template>
					</view>
					<view class="gui-margin-top gui-flex gui-space-between">
						<button type="default" class="gui-button-mini gui-bg-grey7 gui-noborder" style="width: 200rpx" @click="cancelPopup">
							<text class="gui-button-text-mini gui-color-grey">取消</text>
						</button>
						<button type="default" class="gui-button-mini gui-bg-primary gui-noborder" @click="changeStep" style="width: 200rpx">
							<text class="gui-color-white gui-button-text-mini">{{ dataRec.step == 3 ? '保存' : '下一步' }}</text>
						</button>
					</view>
				</view>
			</gui-popup>
		</template>
	</gui-page>
</template>

<script setup>
import { Local } from '@utils/storage.js';
import graceJS from '@/Grace6/js/grace.js';
import { bumen_listsApi, shidian_listsApi, shiyan_dkApi, shiyan_listsApi ,shiyan_userApi} from '@api/api.js';
import { reactive, ref, toRefs, onMounted, onActivated } from 'vue';
import { onShow } from '@dcloudio/uni-app';
let guipopup = ref();
let dataRec = reactive({
	currentSelect: 0,
	listQuery: {
		yuzhong_shidian_id: '',
		yuzhong_bumen_id: '',
		year: ''
	},
	listData: [],
	formData: {
		title: '',
		heng: '',
		zong: '',
		pailie: '',
		shunxu: ''
	},
	arrangMode: [
		{
			value: '1',
			name: '左上角开始'
		},
		{
			value: '2',
			name: '右上角开始'
		},
		{
			value: '3',
			name: '左下角开始'
		},
		{
			value: '4',
			name: '右下角开始'
		}
	],
	step: 1,
	stepName: '自定义地块',
	selectMenu1: ['全部时间', '2020', '2021', '2022', '2023', '2024'],
	selectIndex2: 0,
	selectMenu2FromApi: [],
	selectMenu2: [],
	selectIndex3: 0,
	selectMenu3FromApi: [],
	selectMenu3: []
});
let select1 = function (index, val) {
	if (val.includes('全部')) {
		dataRec.listQuery.year = '';
	} else {
		dataRec.listQuery.year = val;
	}
	getListData();
};
let select2 = function (index, val) {
	if (val.includes('全部')) {
		dataRec.listQuery.yuzhong_bumen_id = '';
	} else {
		dataRec.listQuery.yuzhong_bumen_id = dataRec.selectMenu2FromApi[index].id;
	}
	getListData();
};
let select3 = function (index, val) {
	if (val.includes('全部')) {
		dataRec.listQuery.yuzhong_shidian_id = '';
	} else {
		dataRec.listQuery.yuzhong_shidian_id = dataRec.selectMenu3FromApi[index].id;
	}
	getListData();
};
let openpopup = () => {
	guipopup.value.open();
};
let resetForm = () => {
	dataRec.step = 1;
	dataRec.stepName = '自定义地块';
	dataRec.formData = {
		title: '',
		heng: '',
		zong: '',
		pailie: '',
		shunxu: ''
	};
};
let cancelPopup = () => {
	guipopup.value.close();
	resetForm();
};
let radioChange = async(evt, type) => {
	if (type == 1) {
		dataRec.formData.pailie = evt.detail.value;
	} else if (type == 2) {
		dataRec.formData.shunxu = evt.detail.value;
	} else if (type == 3) {
		dataRec.currentSelect = evt.detail.value;
		let res = await shiyan_userApi({shiyan_id:evt.detail.value})
		// 写入缓存
		Local.set('selectplotId', { id: evt.detail.value });
		
	}
};
let changeStep = async () => {
	let step = dataRec.step;
	switch (step) {
		case 1:
			dataRec.step = step + 1;
			dataRec.stepName = '实验品种排列方式';
			break;
		case 2:
			dataRec.step = step + 1;
			dataRec.stepName = '开始实验顺序';
			break;
		case 3:
			let res = await shiyan_dkApi(dataRec.formData);
			if(res.code==1){
				uni.showToast({
					title:'添加成功',
					icon:'none'
				})
				cancelPopup();
				getListData();
			}
			break;
		default:
			break;
	}
};
onShow(() => {});
let getListData = async () => {
	let res = await shiyan_listsApi(dataRec.listQuery);
	if (res.code == 1) {
		resoveListData(res.data.data);
	}
};
onMounted(async () => {
	if (Local.get('selectplotId')) {
		dataRec.currentSelect = Local.get('selectplotId').id;
	}
	let filterList = await Promise.all([bumen_listsApi(), shidian_listsApi()]);
	resolveFilter(filterList);
	getListData();
});
let resoveListData = (list) => {
	list.forEach((item) => {
		item.s_time = graceJS.toDate(item.s_time, 'str');
		item.e_time = graceJS.toDate(item.e_time, 'str');
	});
	dataRec.listData = list;
};
let resolveFilter = (list) => {
	dataRec.selectMenu2FromApi = [{ id: 0, title: '全部部门' }, ...list[0].data];
	dataRec.selectMenu2 = [];
	dataRec.selectMenu2FromApi.map((item) => {
		dataRec.selectMenu2.push(item.title);
	});
	dataRec.selectMenu3FromApi = [{ id: 0, title: '全部试点' }, ...list[1].data];
	dataRec.selectMenu3 = [];
	dataRec.selectMenu3FromApi.map((item) => {
		dataRec.selectMenu3.push(item.title);
	});
};
</script>
<style lang="scss" scoped>
page {
	background: #fafafa;
}
.graceSelectMenuItem {
	flex: 1;
}
.myTextClass {
	margin-left: 10rpx;
}
.algin-right {
	text-align: right;
}
</style>
